<script setup lang="ts">
import zu51 from "./assets/组51.svg";
import zu49 from "./assets/组49.svg";
import zu50 from "./assets/组50.svg";
import zu52 from "./assets/组52.svg";
import Module from "./module";
import DeviceDetails from "./deviceDetails.vue";
</script>

<template>
	<Module class="h-1/3 w-full box-border p-2" title="设备情况">
		<div class="w-full h-full flex flex-col">
			<div class="h-1/3 w-full flex flex-col py-4 box-border justify-between">
				<div class="flex flex-row items-baseline">
					<div class="text-xl">78.6%</div>
					<div class="text-md">设备在线率</div>
				</div>
				<div class="h-[18px] w-full process-bg px-[5px] py-[5px] box-border">
					<div class="z-10 w-2/3 h-full process box-border">
						<div v-for="i in new Array(17).fill(0)" :key="i"></div>
					</div>
				</div>
			</div>
			<div class="flex-1 w-full grid grid-rows-2 grid-cols-2">
				<DeviceDetails :num="7" title="电表" :img-src="zu51"></DeviceDetails>
				<DeviceDetails :num="4" title="空调" :img-src="zu49"></DeviceDetails>
				<DeviceDetails :num="5" title="网关" :img-src="zu52"></DeviceDetails>
				<DeviceDetails :num="9" title="烟感" :img-src="zu50"></DeviceDetails>
			</div>
		</div>
	</Module>
</template>

<style scoped lang="scss">
.process-bg {
	background: url("./assets/组48.svg") no-repeat;
	background-size: 100% 100%;
}

.process {
	background: linear-gradient(to right, #00000000, #ffa011);
	display: flex;
	flex-direction: row;

	div {
		width: 15px;
		height: 100%;
		border-right: #0d0d0d 2px solid;
	}
}
</style>
